<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格练习</title>
    </head>
    <body>
        <!-- table表格标签 border边框-->
        <table border="1px" style="text-align:center">
            <!-- caption表格标题 -->
            <caption>最美女星</caption>
            <!-- tr(table row  row行 ) -->
            <tr>
                <!-- th(table header) 行标题 -->
                <th>序号</th>
                <th>姓名</th>
                <th>影视</th>
            </tr>
            <tr>
                <!-- td(table data cell  data cell单元格) -->
                <td>1</td>
                <td>钟楚红</td>
                <td>纵横四海</td>
            </tr>
            <tr>
                <td>2</td>
                <td>黎姿</td>
                <td>战无不胜</td>
            </tr>
            <tr>
                <td>3</td>
                <td>朱琳</td>
                <td>西游记</td>
            </tr>
        </table>
        <hr>
        <!-- colspan="n" 从当前单元格(含当前)横(跨列)占n个单元格-->
        <!-- rowspan="n" 从当前单元格(含当前)竖(跨行)占n个单元格 -->
        <!-- 被跨的单元格一定要删除！-->
        <table border="1px">
            <tr>
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
                <td>1-4</td>
            </tr>
            <tr>
                <td colspan="2" align="center">2-1</td>
                <!-- <td>2-2</td>-->
                <td>2-3</td>
                <td rowspan="3">2-4</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <!-- <td>3-4</td>-->
            </tr>
            <tr>
                <td>4-1</td>
                <td>4-2</td>
                <td>4-3</td>
                <!-- <td>4-4</td>-->
            </tr>
        </table>
        <hr>
        <!-- border-collapse 边框线折叠 默认separate 分开  collapse 折叠 -->
        <table border="1" style="border-collapse:collapse">
            <caption>购物车</caption>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
            </tr>
            <tr>
                <td>1</td>
                <td>小米Air</td>
                <td>5877</td>
            </tr>
            <tr>
                <td>2</td>
                <td>华为遥遥遥遥遥遥领先</td>
                <td>8877</td>
            </tr>
            <tr>
                <td>总价：</td>
                <td colspan="2">10000</td>
            </tr>
        </table>




    </body>
</html>